// 人员查询表格

/**
 * 该表格组件需传的props：tableList(表格数据),columns(表格标题),length(表格数据总长度，渲染分多少页用),type(redux派发动作 type：string),getTableList(获取请求更新表格数据的函数),reloadPage(返回一个对象给dispatch的函数)
 *
 */
import React from 'react'
import { Table, Form, Input, Select } from 'antd'
import { connect } from 'dva'
import './findTable.css'
const { Option } = Select

// 供应商组件
const EditableContext = React.createContext()

class EditableCell extends React.Component {
  getInput = () => {
    if (this.props.inputtype === 'text') {
      return <Input />
    }
    return <Select width={80}>
      {
        this.props.option.map((item,index)=>(
          <Option key={index} value={item}>{item}</Option>
        ))
      }
    </Select>
  };

  renderCell = ({ getFieldDecorator }) => {
    const {
      editing,
      dataindex,
      title,
      inputtype,
      record,
      index,
      children,
      ...restProps
    } = this.props
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item style={{ margin: 0 }}>
            {getFieldDecorator(dataindex, {
              rules: [
                {
                  required: true,
                  message: `Please Input ${title}!`,
                },
              ],
              initialValue: record[dataindex],
            })(this.getInput())}
          </Form.Item>
        ) : (
            children
          )}
      </td>
    )
  };
  render () {
    return <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
  }
}

function Findtable ({ tableList, columns, length, reloadTableList, getTableList, reloadPage, id, Editable, ...rest }) {
  // 挂载和改变时重新触发更改数据
  let onChange = (page, size) => {
    if (tableList.length > 7) {
      return
    }
    getTableList(page, size).then(response => {
      let { data } = response
      reloadTableList(() => { return reloadPage(data.data, data.length) })
    })
  }
  let components
  if (Editable) {
    components = {
      body: {
        cell: EditableCell
      }
    }
  }
  return (
    <EditableContext.Provider value={rest.form}>
      <div className='findTable'>
        {Editable ? <Table
          components={components}
          className='tablebox'
          columns={columns}
          dataSource={tableList}
          bordered
          rowKey={id ? 'id' : 'ID'}
          scroll={{ x: true }}
          pagination={{ //配置分页器
            showQuickJumper: true,
            defaultCurrent: 1,
            total: length,
            defaultPageSize: 7,
            showTotal: () => (`共${Math.ceil(length / 7)}页`),
            onChange: onChange
          }}
        /> : <Table
            className='tablebox'
            columns={columns}
            dataSource={tableList}
            bordered
            rowKey={id ? 'id' : 'ID'}
            scroll={{ x: true }}
            pagination={{ //配置分页器
              showQuickJumper: true,
              defaultCurrent: 1,
              total: length,
              defaultPageSize: 7,
              showTotal: () => (`共${Math.ceil(length / 7)}页`),
              onChange: onChange
            }}
          />}
      </div>
    </EditableContext.Provider>
  )
}

const EditableFormTable = Form.create()(Findtable)

export default connect(
  null,
  (dispatch) => ({
    reloadTableList (fn) {
      return dispatch(fn())
    }
  })
)(EditableFormTable)
